<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>计算器</title>
  <style>
    .calculator {
      width: 320px;
      margin: 50px auto;
      padding: 20px;
      background-color: #f3f4f6;
      border-radius: 10px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }

    #display {
      width: 100%;
      height: 60px;
      margin-bottom: 20px;
      font-size: 24px;
      text-align: right;
      padding: 10px;
      background-color: white;
      border: 1px solid #e5e7eb;
      border-radius: 5px;
    }

    .buttons {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 10px;
    }

    button {
      padding: 15px;
      font-size: 18px;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      transition: all 0.2s;
    }

    button:hover {
      filter: brightness(0.95);
    }

    .number {
      background-color: #f9fafb;
      color: #374151;
    }

    .operator {
      background-color: #3b82f6;
      color: white;
    }

    .equal {
      background-color: #10b981;
      color: white;
    }

    .clear {
      background-color: #ef4444;
      color: white;
    }

    .history {
      margin-top: 20px;
      padding: 10px;
      background-color: white;
      border-radius: 5px;
      max-height: 200px;
      overflow-y: auto;
    }
  </style>
</head>
<body>
<div class="calculator">
  <input type="text" id="display" readonly>
  <div class="buttons">
    <button class="clear" onclick="clearDisplay()">AC</button>
    <button class="operator" onclick="deleteChar()">DEL</button>
    <button class="operator" onclick="appendToDisplay('%')">%</button>
    <button class="operator" onclick="appendToDisplay('/')">/</button>

    <button class="number" onclick="appendToDisplay('7')">7</button>
    <button class="number" onclick="appendToDisplay('8')">8</button>
    <button class="number" onclick="appendToDisplay('9')">9</button>
    <button class="operator" onclick="appendToDisplay('*')">×</button>

    <button class="number" onclick="appendToDisplay('4')">4</button>
    <button class="number" onclick="appendToDisplay('5')">5</button>
    <button class="number" onclick="appendToDisplay('6')">6</button>
    <button class="operator" onclick="appendToDisplay('-')">-</button>

    <button class="number" onclick="appendToDisplay('1')">1</button>
    <button class="number" onclick="appendToDisplay('2')">2</button>
    <button class="number" onclick="appendToDisplay('3')">3</button>
    <button class="operator" onclick="appendToDisplay('+')">+</button>

    <button class="number" onclick="appendToDisplay('0')" style="grid-column: span 2;">0</button>
    <button class="number" onclick="appendToDisplay('.')">.</button>
    <button class="equal" onclick="calculate()">=</button>
  </div>

  <div class="history">
    <h3>计算历史</h3>
    <div id="history-list"></div>
  </div>
</div>

<script>
  const display = document.getElementById('display');
  const historyList = document.getElementById('history-list');

  // 前端与后端的API端点配置
  const API = {
    calculate: '/api/calculate',
    history: '/api/history'
  };

  // 发送计算请求到后端
  async function calculate() {
    try {
      const expression = display.value;

      const response = await fetch(API.calculate, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({ expression })
      });

      const data = await response.json();

      if (response.ok) {
        display.value = data.result;
        addHistoryItem(`${expression} = ${data.result}`);
      } else {
        display.value = '错误';
        console.error('后端错误:', data.error);
      }
    } catch (error) {
      display.value = '连接失败';
      console.error('请求失败:', error);
    }
  }

  // 获取计算历史
  async function loadHistory() {
    try {
      const response = await fetch(API.history);
      const history = await response.json();
      historyList.innerHTML = history.map(item =>
              `<div>${item.expression} = ${item.result}</div>`
      ).join('');
    } catch (error) {
      console.error('获取历史失败:', error);
    }
  }

  // 工具函数
  function appendToDisplay(value) {
    display.value += value;
  }

  function clearDisplay() {
    display.value = '';
  }

  function deleteChar() {
    display.value = display.value.slice(0, -1);
  }

  function addHistoryItem(text) {
    const item = document.createElement('div');
    item.textContent = text;
    historyList.prepend(item);
  }

  // 初始化加载历史记录
  loadHistory();
</script>
</body>
</html>